<template>
<div class="img">

  <el-row class="rowCl">
    <el-col :span="8"><div class="grid-content bg-purple"> &nbsp;</div></el-col>
    <el-col :span="8"><div class="grid-content bg-purple-light">
<!--      <el-card class="box-card">-->
        <h3 style="text-align: center">注册</h3>
        <el-form :model="user" :rules="rules" ref="userForm" >

          <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark">
              <el-form-item label="用户名：" prop="userName">
                <el-input v-model="user.userName"></el-input>
              </el-form-item>

            </div></el-col>
          </el-row>

          <el-row style="margin-top: 10px">
            <el-col :span="24"><div class="grid-content bg-purple-dark">
              <el-form-item label="用户密码：" prop="password">
                <el-input v-model="user.password" show-password></el-input>
              </el-form-item>
            </div></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark">
              <el-form-item label="真实姓名：" prop="trueName">
                <el-input v-model="user.trueName"></el-input>
              </el-form-item>

            </div></el-col>
          </el-row>

          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="用户等级">
              <el-select v-model="form.grade" placeholder="请选择订单类型">
                <el-option label="超级管理员" value="超级管理员"></el-option>
                <el-option label="库房管理员" value="库房管理员"></el-option>
                <el-option label="客户管理员" value="客户管理员"></el-option>
              </el-select>
            </el-form-item>
          </el-form>

        </el-form>
        <el-button type="primary"  style="margin-top: 10px;margin-right: 10px" @click="submitForm('userForm')">提交</el-button>
        <el-button @click="resetForm('userForm')">取消</el-button>
<!--                <el-button @click="register">注册</el-button>-->

<!--      </el-card>-->
    </div>
    </el-col>
    <el-col :span="8"><div class="grid-content bg-purple">&nbsp;</div></el-col>
  </el-row>
</div>
</template>

<script>
export default {
  /**
   * 1.名称
   */
  name: "registerView",
  /**
   * 2.数据
   */
  data(){
    return{

      user: {
        userName: '',
        password: '',
        phone:'',
      },
      form:{
        grade:'客户管理员'
      },
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        trueName: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],

      }


    }
  },
  /**
   * 3.初始化
   */
  mounted() {

  },
  /**
   * 4.方法
   */
  methods:{
//1.提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {

          console.log(this.form.grade)
          let grade = this.form.grade
          let grade1 = "客户管理员"
          if (grade == "超级管理员"){
            grade1 = 0
          }else if (grade == "库房管理员"){
            grade1 = 1
          }else {
            grade1 = 2
          }

          let url = "/sscsys/user/register/"+this.user.userName+"/"
                  +this.user.password+"/"+grade1+"/"+this.user.trueName;
          this.$axios.get(url).then(r =>{
            console.log(r.data)
            if (r.data == "ok"){
              this.$router.push("/LoginCom")
            }else {
              this.$message.error("注册失败")
              return false;
            }
          })
        } else {
          this.$message.error("注册失败")
          return false;
        }
      });
    },
//2.清空表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }

  }
}
</script>

<style scoped>
  .img{
    width: 1250px;
    height: 550px;
    background-image: url("login5.webp");
    margin-bottom: 10px;
  }
</style>